<!--
  * 部门 表单 树形下拉框
  *
  * @Author:    zhoujk
  * @Date:      2025-01-25 17:04
-->
<template>
  <a-tree-select
    :value="props.value"
    :treeData="treeData"
    :fieldNames="{ label: 'name', key: 'id', value: 'id' }"
    show-search
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="请选择菜单"
    allow-clear
    tree-default-expand-all
    treeNodeFilterProp="name"
    @change="treeSelectChange"
  />
</template>
<script setup>
  import { menuMerchantApi } from '/@/api/system/b-merchant/menu-api.js'
  import { inject, reactive, ref, watch } from 'vue'
  import { menuApi } from '/src/api/system/b-operation/menu-api'
  import { ZZB_USER_TYPE_ENUM } from '/src/constants/system/system-const.js'

  const props = defineProps({
    value: String,
  })

  const selectedUserType = inject('selectedUserType')

  let treeData = ref([])
  let param = reactive({
    onlyMenuFlag: true,
    userType: ZZB_USER_TYPE_ENUM.USER_TYPE_PLATFORM.value,
  })

  async function queryMenuTree() {
    param.userType = selectedUserType.value
    let res
    if (ZZB_USER_TYPE_ENUM.USER_TYPE_MERCHANT.value === selectedUserType.value) {
      res = await menuMerchantApi.tree(param)
    } else {
      res = await menuApi.tree(param)
    }
    treeData.value = res.data
  }

  const emit = defineEmits(['update:value'])
  function treeSelectChange(e) {
    emit('update:value', e)
  }

  watch(selectedUserType.value, () => {
    queryMenuTree()
  })

  defineExpose({
    queryMenuTree,
  })
</script>
